<!-- 我的票据 -->
<template>
    <div class="content">
        <div class="filter_btn">
            <el-row>
                <el-col :span="16" class="bill-list-left">
                    <el-col :span="2" class="title hpx-label">
                        票据列表
                    </el-col>
                    <el-col :span="16" class="bill-status-type">
                        <el-radio-group v-model="billStatus" size="small" @change="changeStatus()">
                            <el-radio-button v-for="item in billOptions" :label="item.key" :key="item.key">{{item.label}}<MarkRemind :tipsNum="getBillTips(item)" class="bid_tips"/></el-radio-button>
                        </el-radio-group>
                    </el-col>
                    <el-col :span="2" class="hpx-label-btn">
                        <el-button type="primary" size="mini" class="enter-bill" @click="$router.push('/seller/posted/2/0')" icon="iconfont icon-tianjia"> 录入库存</el-button>
                    </el-col>
                </el-col>
                <el-col :span="8" class="hpx-red-tips bill-list-right">
                    <el-button type="primary" size="mini" class="bill-choose-btn" @click="chooseFilter()">筛选<i :class="[isFilterShow ? 'el-icon-arrow-up' : 'el-icon-arrow-down']"></i></el-button>
                    <el-button type="primary" size="mini" @click="batchPublish()" :disabled="isSelect || (sectionArr.length == 0 && isBatchSelect)" class="bill-batch-btn" v-if="billStatus == 1 || billStatus == ''">批量发布</el-button>
                    <el-button type="danger" size="mini" @click="remove()" v-if="billStatus == '' || billStatus == 1 || billStatus == 4" :disabled="isBatchSelect || (sectionArr.length == 0 && isSelect)" class="bill-delete-btn"><i class="iconfont icon-shanchu"></i>删除</el-button>
                    <el-button type="text" class="cancel-btn" @click="cancelCheck" v-if="isSelect || isBatchSelect">取消</el-button>
                </el-col>
            </el-row>
            <el-row class="choose-box" v-if="isFilterShow">
                <el-form class="my_bill_form">
                    <el-col :span="24" class="choose-box1">
                        <el-form-item label="承兑机构">
                            <el-checkbox-group v-model="acceptorTypeArr" size="small" @change="changeCheckbox(acceptorTypeArr)">
                                <el-checkbox-button v-for="item in acceptOptions" :label="item.key" :key="item.key">{{item.label}}</el-checkbox-button>
                            </el-checkbox-group>
                        </el-form-item>
                        <el-form-item label="票面金额" class="nowrap">
                            <el-radio-group v-model="filterModel.billPrice" size="small" @change="changePrice()" class="bill_price">
                                <el-radio-button v-for="item in billPriceOption" :label="item.key" :key="item.key">
                                    <span v-if="item.key === ''">不限</span>
                                    <span v-if="item.key !== ''">
                                                {{item.gtoe ? '[' : '('}}{{item.billPriceMin}}万,{{item.billPriceMax}}万{{item.ltoe ? ']' : ')'}}
                                            </span>
                                </el-radio-button>
                            </el-radio-group>
                            <div size="small" class="ready_bill_price"
                                 :class="{is_active: isInputPrice}">
                                [ <el-input type="number" v-model="filterModel.trem_billPrice.minPrice" placeholder="最小"></el-input>万,
                                <el-input type="number" v-model="filterModel.trem_billPrice.maxPrice" placeholder="最大"></el-input>万 ]
                            </div>
                            <el-button type="primary" size="small"
                                       v-if="filterModel.trem_billPrice.minPrice != '' && filterModel.trem_billPrice.maxPrice != ''"
                                       @click="confirmPrice()">
                                确定
                            </el-button>
                            <el-button type="info" size="small"
                                       v-if="filterModel.trem_billPrice.minPrice != '' && filterModel.trem_billPrice.maxPrice != ''"
                                       @click="clearPrice()">
                                清空
                            </el-button>
                        </el-form-item>
                        <el-form-item label="到期天数" class="nowrap">
                            <el-radio-group v-model="filterModel.deadTime" size="small" @change="changeTime()" class="bill_price">
                                <el-radio-button v-for="item in deadTimeOption" :label="item.key" :key="item.key">
                                    <span v-if="item.key === ''">不限</span>
                                    <span v-if="item.key !== ''">
                                                {{item.gtoe ? '[' : '('}}{{item.expiresDayMin}}天,{{item.expiresDayMax}}天{{item.ltoe ? ']' : ')'}}
                                            </span>
                                </el-radio-button>
                            </el-radio-group>
                            <div size="small" class="ready_bill_price"
                                 :class="{is_active: isInputTime}">
                                [ <el-input type="number" v-model="filterModel.trem_deadTime.minTime" placeholder="最小"></el-input>天,
                                <el-input type="number" v-model="filterModel.trem_deadTime.maxTime" placeholder="最大"></el-input>天 ]
                            </div>
                            <el-button type="primary" size="small"
                                       v-if="filterModel.trem_deadTime.minTime != '' && filterModel.trem_deadTime.maxTime != ''"
                                       @click="confirmDays()">
                                确定
                            </el-button>
                            <el-button type="info" size="small"
                                       v-if="filterModel.trem_deadTime.minTime != '' && filterModel.trem_deadTime.maxTime != ''"
                                       @click="clearTime()">
                                清空
                            </el-button>
                        </el-form-item>
                        <el-form-item label="背书瑕疵">
                            <el-radio-group v-model="filterModel.flaw" size="small" @change="changeFlaw(filterModel.flaw)">
                                <el-radio-button v-for="item in flawOptions" :label="item.key" :key="item.key">{{item.label}}</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" class="filter_bottom">
                        <el-form-item label="筛选条件" class="condition_tangs">
                            <el-tag
                                    v-for="tag in tags"
                                    :key="tag.name"
                                    closable
                                    disable-transitions
                                    :type="tag.type"
                                    size="small"
                                    @close="closeTag(tag)">
                                {{tag.name}}
                            </el-tag>
                            <span v-if="tags.length == 0" class="hpx-label">无</span>
                            <span class="clear_filter" v-if="tags && tags.length != 0" @click="clearFilter()"><i class="iconfont icon-shanchu"></i> 清空筛选</span>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
        </div>
        <template>
                   <!-- @remove="click_delete"
                   @batchPublish="click_batch" -->
            <Table :tableData="tableData"
                   :isSelect="isSelect"
                   :isBatchSelect="isBatchSelect"
                   @selection="selection"
                   @change="changePage"
                   @changes="changeSize"
                   class="my_bill_table"
                   :tableName="'myBillTable'"
                   :operateType="operateType">
                <template slot-scope="{scope}" class="operate-column">
                    <el-row>
                        <el-button type="primary" size="small" class="bill-btn" @click="$router.push(`/seller/myBill/detail/${scope.row.bill_id}`)" v-if="scope.row.bill_bidding_size > 0">确认交易</el-button>
                        <el-button type="primary" size="small" plain class="bill-btn" @click="publishBill(scope.row)" v-if="scope.row.bill_status_code == 800 && scope.row.bill_is_checked == 1">发布</el-button>
                        <el-button type="primary" size="small" plain class="bill-btn" @click="$router.push(`/seller/editBill/1/${scope.row.bill_id}`)" v-if="scope.row.bill_is_checked == -1 && (scope.row.bill_product_id != '' && scope.row.bill_product_id != null)">重新发布</el-button>
                        <el-button type="primary" size="small" plain class="bill-btn" @click="$router.push(`/seller/editBill/2/${scope.row.bill_id}`)" v-if="scope.row.bill_is_checked == -1 && (scope.row.bill_product_id == '' || scope.row.bill_product_id == undefined || scope.row.bill_product_id == null)">重新录入</el-button>
                        <el-button type="text" size="small" v-if="scope.row.bill_status_code == 801" @click="removeOfferBtn(scope.row)">
                            <i class="iconfont icon-bianji"></i> 撤下
                        </el-button>
                        <!--801：修改的只是询价信息  撤下之后才能修改询价信息-->
                        <el-button type="text" size="small" v-if="scope.row.bill_status_code == 801" @click="editOffer(scope.row)">
                            <i class="iconfont icon-bianji"></i> 修改
                        </el-button>
                        <!-- 800 && 录入审核失败（bill_is_checked == -1）&& !product_id 修改整个票据信息(修改录入信息) -->
                        <el-button type="text" size="small"
                                v-if="scope.row.bill_status_code == 800 && (scope.row.bill_is_checked == 1) && (!scope.row.bill_product_id || scope.row.bill_product_id == null)"
                                @click="$router.push(`/seller/editBill/2/${scope.row.bill_id}`)">
                            <i class="iconfont icon-bianji"></i> 修改
                        </el-button>
                        <!-- 重新发布：修改票面和询价信息 -->
                        <el-button type="primary" size="small" plain @click="$router.push(`/seller/editBill/1/${scope.row.bill_id}`)" v-if="scope.row.bill_status_code == 815 || scope.row.bill_status_code == 816">重新发布</el-button>
                        <el-button type="text" size="small" @click="$router.push(`/seller/myBill/detail/${scope.row.bill_id}`)">
                            <i class="iconfont icon-xiangqing2"></i> 详情
                        </el-button>
                    </el-row>
                </template>
            </Table>
        </template>

        <!-- 发布弹窗 -->
        <DialogInput ref="publishDialog" title="发布">
            <div class="rem-dialog-con text_left publish-box">
                <el-form :model="form" label-width="130px" size="small">
                    <div class="publish-box-con">
                        <el-form-item label="票据号：">{{this.publishModel.bill_bill_number}}</el-form-item>
                        <el-form-item label="票面金额："><i class="rem-text">{{this.publishModel.bill_sum_price}}元</i></el-form-item>
                        <el-form-item label="到期时间：">{{this.publishModel.bill_deadline_time}}</el-form-item>
                        <el-form-item label="承兑人：">{{this.publishModel.bill_acceptor_name}}</el-form-item>
                    </div>
                    <div class="publish-box-con box-con-padding">
                        <el-form-item label="竞价方式">
                            <el-radio-group v-model="form.bidding_mode" size="small">
                                <el-radio-button label="3212">自由竞价</el-radio-button>
                                <el-radio-button label="3210">一口价</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="发布期限" prop="trade_appoint_day">
                            <el-radio-group v-model="form.trade_appoint_day" size="small">
                                <el-radio-button :label="0">T + 0</el-radio-button>
                                <el-radio-button :label="1">T + 1</el-radio-button>
                                <el-radio-button :label="2">T + N</el-radio-button>
                            </el-radio-group>
                            <el-input-number v-model="form.trade_appoint_day" controls-position="right"></el-input-number>
                        </el-form-item>
                        <div class="rem_box">
                            <div class="rem_box_left">
                                <i class="iconfont icon-tixing"></i>
                                <span style="font-weight: bold;">提醒：</span>
                            </div>
                            <div class="rem_box_right">
                                发布期限 T+0为：工作日18:00前发布的订单，当日24:00系统自动下架； 18:00后发布的订单，则次工作日24:00系统自动下架；T+1再顺延1天下 架；同理t+n顺延n天下架。
                            </div>
                        </div>
                    </div>
                    <div class="publish-box-con box-con-padding">
                        <el-form-item label="利率" prop="bill_rate">
                            <el-input class="approve-int approve-int-width" v-model="form.bill_rate" @input="ratechange()" placeholder="请输入利率" suffix-icon="iconfont icon-icon-test4"></el-input>
                        </el-form-item>
                        <el-form-item label="每十万加" prop="bill_every_plus">
                            <el-input class="approve-int approve-int-width" v-model="form.bill_every_plus" @input="ratechange()" placeholder="请输入每十万加" suffix-icon="iconfont icon-yuan"></el-input>
                        </el-form-item>
                        <el-row class="offer_info_box">
                            <el-col :span="24" class="rate_offer">
                                <label>贴息：<i class="rem-text">{{this.form.discount_interest == '' || this.form.discount_interest == null ? '--' : this.form.discount_interest}}元</i></label>
                                <span>(合每十万扣款：<i class="rem-text">{{this.form.every_plus_amount == '' || this.form.every_plus_amount == null ? '--' : this.form.every_plus_amount}}</i>元)</span>
                            </el-col>
                            <el-col :span="24">
                                <label>贴现额：<i class="rem-text">{{this.form.discount_amount == '' || this.form.discount_amount == null ? '--' : this.form.discount_amount}}元</i></label>
                            </el-col>
                        </el-row>
                    </div>
                </el-form>
            </div>
            <span slot="Remfooter">
                <el-button @click="closeDialog()" type="info" class="hpx-cancel-color dialog-button">取消</el-button>
                <el-button type="primary" class="dialog-button" @click="confirmPublish()">发布</el-button>
            </span>
        </DialogInput>
        <!-- 发布成功 -->
        <DialogInput ref="publishDialogSuccess" title="提醒">
            <div class="rem-dialog-con">
                <el-row class="hpx-success"><i class="iconfont icon-wancheng"></i></el-row>
                <el-row>发布成功!</el-row>
            </div>
            <span slot="Remfooter">
                <el-button @click="closeDialog()" type="primary" class="dialog-button">我知道了</el-button>
            </span>
        </DialogInput>
        <!-- 删除票据警告弹框 -->
        <DialogInput ref="deleteBill" title="提醒">
            <div class="rem-dialog-con">
                <el-row class="warning hpx-red-tips"><i class="iconfont icon-tishi"></i></el-row>
                <el-row>是否确定要批量删除{{sectionArr.length}}张汇票?</el-row>
            </div>
            <span slot="Remfooter">
                <el-button @click="closeDialog()" type="info" class="hpx-cancel-color dialog-button">否</el-button>
                <el-button @click="confirmDelete()" type="primary" class="dialog-button">是</el-button>
            </span>
        </DialogInput>
        <!-- 成功删除票据弹框 -->
        <DialogInput ref="deleteSuccess" title="提醒">
            <div class="rem-dialog-con">
                <el-row class="hpx-success"><i class="iconfont icon-wancheng"></i></el-row>
                <el-row>已成功删除票据</el-row>
            </div>
            <span slot="Remfooter">
                <el-button @click="closeDialog()" type="primary" class="dialog-button">我知道了</el-button>
            </span>
        </DialogInput>

        <!-- 批量发布弹窗 -->
        <DialogInput ref="batchPublishBill" title="批量发布">
            <div class="rem-dialog-con text_left publish-box">
                <el-form :model="form" label-width="130px" size="small">
                    <div class="publish-box-con">
                        <el-form-item label="已选票据："><i class="rem-text">{{this.batch.totalNum}}张</i></el-form-item>
                        <el-form-item label="总金额："><i class="rem-text">{{this.batch.totalPrice}}元</i></el-form-item>
                    </div>
                    <div class="publish-box-con box-con-padding">
                        <el-form-item label="竞价方式">
                            <el-radio-group v-model="form.bidding_mode" size="small">
                                <el-radio-button label="3212">自由竞价</el-radio-button>
                                <el-radio-button label="3210">一口价</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="发布期限" prop="trade_appoint_day">
                            <el-radio-group v-model="form.trade_appoint_day" size="small">
                                <el-radio-button :label="0">T + 0</el-radio-button>
                                <el-radio-button :label="1">T + 1</el-radio-button>
                                <el-radio-button :label="2">T + N</el-radio-button>
                            </el-radio-group>
                            <el-input-number :min="2" :max="10" controls-position="right"></el-input-number>
                        </el-form-item>
                        <div class="rem_box">
                            <div class="rem_box_left">
                                <i class="iconfont icon-tixing"></i>
                                <span style="font-weight: bold;">提醒：</span>
                            </div>
                            <div class="rem_box_right">
                                发布期限 T+0为：工作日18:00前发布的订单，当日24:00系统自动下架； 18:00后发布的订单，则次工作日24:00系统自动下架；T+1再顺延1天下 架；同理t+n顺延n天下架。
                            </div>
                        </div>
                    </div>
                    <div class="publish-box-con box-con-padding">
                        <el-form-item label="利率" prop="bill_rate">
                            <el-input class="approve-int approve-int-width" v-model="form.bill_rate" placeholder="请输入利率" suffix-icon="iconfont icon-icon-test4"></el-input>
                        </el-form-item>
                        <el-form-item label="每十万加" prop="bill_every_plus">
                            <el-input class="approve-int approve-int-width" v-model="form.bill_every_plus" placeholder="请输入每十万加" suffix-icon="iconfont icon-yuan"></el-input>
                        </el-form-item>
                    </div>
                </el-form>
            </div>
            <span slot="Remfooter">
                <el-button @click="closeDialog()" type="info" class="hpx-cancel-color dialog-button">取消</el-button>
                <el-button @click="confirmBatchPublish()" type="primary" class="dialog-button">发布</el-button>
            </span>
        </DialogInput>
        <!-- 批量发布成功 -->
        <DialogInput ref="batchPublishSuccess" title="提醒">
            <div class="rem-dialog-con">
                <el-row class="hpx-success"><i class="iconfont icon-wancheng"></i></el-row>
                <el-row>已成功发布票据</el-row>
            </div>
            <span slot="Remfooter">
                <el-button @click="closeDialog()" type="primary" class="dialog-button">我知道了</el-button>
            </span>
        </DialogInput>

        <!-- 撤下弹窗 -->
        <DialogInput ref="removeOffer" title="提醒">
            <div class="rem-dialog-con">
                <el-row class="warning hpx-red-tips"><i class="iconfont icon-tishi"></i></el-row>
                <el-row>确定要撤下该询价吗?</el-row>
            </div>
            <span slot="Remfooter">
                <el-button @click="closeDialog()" type="info" class="hpx-cancel-color dialog-button">否</el-button>
                <el-button @click="confirmremoveOffer()" type="primary" class="dialog-button">是</el-button>
            </span>
        </DialogInput>
        <!-- 撤下成功 -->
        <DialogInput ref="removeOfferSuccess" title="提醒">
            <div class="rem-dialog-con">
                <el-row class="hpx-success"><i class="iconfont icon-wancheng"></i></el-row>
                <el-row>撤下成功!</el-row>
            </div>
            <span slot="Remfooter">
                <el-button @click="closeDialog()" type="primary" class="dialog-button">我知道了</el-button>
            </span>
        </DialogInput>

        <!-- 修改询价 -->
        <DialogInput ref="editOfferDialog" title="询价修改">
            <div class="rem-dialog-con text_left publish-box">
                <el-form :model="form" label-width="130px" size="small">
                    <div class="publish-box-con">
                        <el-form-item label="票据号：">{{this.publishModel.bill_bill_number}}</el-form-item>
                        <el-form-item label="票面金额："><i class="rem-text">{{this.publishModel.bill_sum_price}}元</i></el-form-item>
                        <el-form-item label="到期时间：">{{this.publishModel.bill_deadline_time}}</el-form-item>
                        <el-form-item label="承兑人：">{{this.publishModel.bill_acceptor_name}}</el-form-item>
                    </div>
                    <div class="publish-box-con box-con-padding">
                        <el-form-item label="竞价方式">
                            <el-radio-group v-model="form.bidding_mode" size="small">
                                <el-radio-button label="3212">自由竞价</el-radio-button>
                                <el-radio-button label="3210">一口价</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="发布期限" prop="trade_appoint_day">
                            <el-radio-group v-model="form.trade_appoint_day" size="small">
                                <el-radio-button :label="0">T + 0</el-radio-button>
                                <el-radio-button :label="1">T + 1</el-radio-button>
                                <el-radio-button :label="2">T + N</el-radio-button>
                            </el-radio-group>
                            <el-input-number v-model="form.trade_appoint_day" controls-position="right"></el-input-number>
                        </el-form-item>
                        <div class="rem_box">
                            <div class="rem_box_left">
                                <i class="iconfont icon-tixing"></i>
                                <span style="font-weight: bold;">提醒：</span>
                            </div>
                            <div class="rem_box_right">
                                发布期限 T+0为：工作日18:00前发布的订单，当日24:00系统自动下架； 18:00后发布的订单，则次工作日24:00系统自动下架；T+1再顺延1天下 架；同理t+n顺延n天下架。
                            </div>
                        </div>
                    </div>
                    <div class="publish-box-con box-con-padding">
                        <el-form-item label="利率" prop="bill_rate">
                            <el-input class="approve-int approve-int-width" v-model="form.bill_rate" @input="ratechange()" placeholder="请输入利率" suffix-icon="iconfont icon-icon-test4"></el-input>
                        </el-form-item>
                        <el-form-item label="每十万加" prop="bill_every_plus">
                            <el-input class="approve-int approve-int-width" v-model="form.bill_every_plus" @input="ratechange()" placeholder="请输入每十万加" suffix-icon="iconfont icon-yuan"></el-input>
                        </el-form-item>
                        <el-row class="offer_info_box">
                            <el-col :span="24">
                                <label>贴息：<i class="rem-text">{{!this.form.discount_interest ? '--' : this.form.discount_interest}}元</i></label>
                                <span>(合每十万扣款：<i class="rem-text">{{!this.form.every_plus_amount ? '--' : this.form.every_plus_amount}}元</i>)</span>
                            </el-col>
                            <el-col :span="24">
                                <label>贴现额：<i class="rem-text">{{!this.form.discount_amount ? '--' : this.form.discount_amount}}元</i></label>
                            </el-col>
                        </el-row>
                    </div>
                </el-form>
            </div>
            <span slot="Remfooter">
                <el-button @click="closeDialog()" type="info" class="hpx-cancel-color dialog-button">取消</el-button>
                <el-button type="primary" class="dialog-button" @click="confirmEditOffer()">修改</el-button>
            </span>
        </DialogInput>
        <!-- 询价修改成功 -->
        <DialogInput ref="editOfferSuccess" title="提醒">
            <div class="rem-dialog-con">
                <el-row class="hpx-success"><i class="iconfont icon-wancheng"></i></el-row>
                <el-row>询价修改成功!</el-row>
            </div>
            <span slot="Remfooter">
                <el-button @click="closeDialog()" type="primary" class="dialog-button">我知道了</el-button>
            </span>
        </DialogInput>
    </div>
</template>

<script lang="ts">
    import { Vue, Component } from 'vue-property-decorator';
    import Table from '@component/common/HpxTable.vue';
    import DialogInput from '@component/common/DialogInput.vue';
    import WarmPrompt from '@component/common/WarmPrompt.vue';
    import MarkRemind from '@component/common/MarkRemind.vue';
    import { mapState, mapMutations, mapGetters, mapActions } from 'vuex'
    // import FormTitle from '@component/common/FormTitle.vue';
    import moment from 'moment';
    import { hideStr, ellipsis } from '@/util/format';
    import _ from 'lodash'
    import calc from 'calculatorjs'
    @Component({
        components: {
            Table,
            DialogInput,
            WarmPrompt,
            MarkRemind
        },
        computed: {
            ...mapState({
                allTips: 'allTips'
            })
        },
        methods: {
            ...mapActions([
                'getAllTips'
            ])
        }
    })
    export default class MyBill extends Vue {
        operateType:string = 'delete'
        billStatus:string = "";
        acceptorTypeArr = [''];
        filterModel = {
            acceptorType: '',
            billPrice: '',
            trem_billPrice: {
                minPrice: '',
                maxPrice: ''
            },
            deadTime: '',
            trem_deadTime: {
                minTime: '',
                maxTime: ''
            },
            flaw: ''
        }
        isInputPrice = false
        isInputTime = false
        isFilterShow: boolean = false;
        oldChecked:any = []
        tags:any = []
        billPriceMin = 0
        billPriceMax = 0
        acceptOptions = [{
                label: '不限',
                key: ''
            },{
                label: '国股',
                key: '401'
            },{
                label: '城商',
                key: '402'
            },{
                label: '三农',
                key: '404'
            },{
                label: '村镇',
                key: '405'
            },{
                label: '外资',
                key: '406'
            },{
                label: '财务公司',
                key: '407'
            },{
                label: '商票',
                key: '408'
        }]
        billPriceOption = [{
                label: '不限',
                billPriceMin: '',
                billPriceMax: '',
                gtoe: false, // >=
                ltoe: false, // <=
                key: ''
            },{
                label: '(0,10万)',
                billPriceMin: '0',
                billPriceMax: '10',
                gtoe: false, // >=
                ltoe: false, // <=
                key: '0'
            },{
                label: '[10万,50万)',
                billPriceMin: '10',
                billPriceMax: '50',
                gtoe: true, // >=
                ltoe: false, // <=
                key: '1'
            },{
                label: '[50万,100万)',
                billPriceMin: '50',
                billPriceMax: '100',
                gtoe: true, // >=
                ltoe: false, // <=
                key: '2'
            },{
                label: '[100万,+∞)',
                billPriceMin: '100',
                billPriceMax: '+∞',
                gtoe: true, // >=
                ltoe: false, // <=
                key: '3'
            }]
            deadTimeOption = [{
                label: '不限',
                expiresDayMin: '',
                expiresDayMax: '',
                gtoe: false,
                ltoe: false,
                key: ''
            },{
                label: '(0,90天)',
                expiresDayMin: '0',
                expiresDayMax: '90',
                gtoe: false,
                ltoe: false,
                key: '0'
            },{
                label: '[90天,150天)',
                expiresDayMin: '90',
                expiresDayMax: '150',
                gtoe: true,
                ltoe: false,
                key: '1'
            },{
                label: '[150天,186天)',
                expiresDayMin: '150',
                expiresDayMax: '186',
                gtoe: true,
                ltoe: false,
                key: '2'
            },{
                label: '[186天,330天)',
                expiresDayMin: '186',
                expiresDayMax: '330',
                gtoe: true,
                ltoe: false,
                key: '3'
            },{
                label: '[330天,+∞)',
                expiresDayMin: '330',
                expiresDayMax: '+∞',
                gtoe: true,
                ltoe: false,
                key: '4'
            }]
            flawOptions = [{
                label: '不限',
                key: ''
            },{
                label: '无瑕疵',
                key: '-1'
            },{
                label: '有瑕疵',
                key: '1'
        }]
        //请求票据列表函数调用来源
        transferChannel = ''
        chooseFilter () {
            this.isFilterShow = !this.isFilterShow;
        }

        billOptions = [{
                label: '全部库存票',
                key: ''
            },{
                label: '待审核',
                key: '5'
            },{
                label: '未发布',
                key: '1'
            },{
                label: '已发布',
                key: '2'
            },{
                label: '待确认',
                key: '3'
            },{
                label: '审核失败',
                key: '4'
        }]
        filterCondition = {
            //承兑机构
            acceptType: '',
            // 票面金额
            billPrice: { min: '', max: '', gtoe: false, ltoe: false },
            // 到期天数
            expiresDays: { min: '', max: '', gtoe: false, ltoe: false },
            //背书瑕疵
            flaw: '',
        }
        get filterType() {
            return {
                acceptType: `承兑机构:${this.filterCondition.acceptType}`,
                billPrice: `
                    票面金额:${this.filterCondition.billPrice.gtoe ? '[' : '('}${this.filterCondition.billPrice.min}${this.filterCondition.billPrice.min == '0' ? '' : '万'},
                            ${this.filterCondition.billPrice.max}${this.filterCondition.billPrice.max == '+∞' ? '' : '万'}${this.filterCondition.billPrice.ltoe ? ']' : ')'}`,
                expiresDays: `
                    到期天数:
                            ${this.filterCondition.expiresDays.gtoe ? '[' : '('}${this.filterCondition.expiresDays.min}${this.filterCondition.expiresDays.min == '0' ? '' : '天'},
                            ${this.filterCondition.expiresDays.max}${this.filterCondition.expiresDays.max == '+∞' ? '' : '天'}${this.filterCondition.expiresDays.ltoe ? ']' : ')'}`,
                flaw: `背书瑕疵: ${this.filterCondition.flaw}`,
            }
        }
        //生成筛选条件标签
        getConditionTag (label:string, variable:string) {
            let tag = {
                name: label,
                variable: variable,
                type: 'danger'
            }
            this.tags.push(tag)
        }
        //关闭标签
        closeTag (tag) {
            this.tags.splice(this.tags.indexOf(tag), 1)
            let variable = tag.variable
            switch (variable) {
                case 'acceptorType':
                    let deleteTag = _.find(this.acceptOptions, (el)=> tag.name.indexOf(el.label)>-1)
                    if(deleteTag){
                        this.acceptorTypeArr.forEach((item, index) => {
                            if(item === deleteTag.key){
                                this.acceptorTypeArr.splice(index,1)
                                if(this.acceptorTypeArr.length == 0){
                                    this.acceptorTypeArr = ['']
                                }
                            }
                        })
                    }
                    break;
                case 'billPrice':
                    this.filterModel.billPrice = ''
                    this.filterModel.trem_billPrice.minPrice = ''
                    this.filterModel.trem_billPrice.maxPrice = ''
                    this.isInputPrice = false
                    break;
                case 'expiresDays':
                    this.filterModel.deadTime = ''
                    break;
                case 'flaw':
                    this.filterModel.flaw = ''
                    break;
            }
            // this.getBillList()
        }
        //由选项的key得出对应的label
        getCheckLabel (arr:any, value:string) {
            for(let i = 0;i<arr.length;i++){
                if(arr[i].key === value){
                    return arr[i].label
                }
            }
        }
        //点击不限时删除对应的标签
        deleteTags (variable:string) {
            let anotherTags = this.tags.filter((el, index) => {
                return el.variable !== variable
            })
            this.tags = anotherTags;
        }
        //比较两个数组的差异
        diff(arr1, arr2) {
            let newArr = [];
            let arr3 = [];
            for (let i=0;i<arr1.length;i++) {
                if(arr2.indexOf(arr1[i]) === -1)
                    arr3.push(arr1[i]);
            }
            let arr4 = [];
            for (let j=0;j<arr2.length;j++) {
                if(arr1.indexOf(arr2[j]) === -1)
                    arr4.push(arr2[j]);
            }
            newArr = arr3.concat(arr4);
            return newArr;
        }
        //切换承兑机构
        changeCheckbox (item:any) {
            //如果点击不限，则取消其他选项
            if(item[item.length-1] == ''){
                this.acceptorTypeArr = ['']
                this.deleteTags('acceptorType')
            }else{
                //点击取消了某个选项
                if(item.length < this.oldChecked.length){
                    //删除的承兑类型id
                    let deleteId = this.diff(Array.from(item), Array.from(this.oldChecked))
                    //删除的承兑类型name
                    let deleteStr = this.getCheckLabel(this.acceptOptions,deleteId.join().toString())
                    //删除的标签
                    let deleteTag = _.find(this.tags,(el) => el.name.indexOf(deleteStr)>-1)
                    if(deleteTag){
                        this.tags.splice(this.tags.indexOf(deleteTag),1)
                    }
                    this.oldChecked = item
                }else{
                    //新增选中了某个选项
                    this.oldChecked = item
                    //选中的类型
                    this.filterCondition.acceptType = this.getCheckLabel(this.acceptOptions,item[item.length-1])
                    this.getConditionTag(this.filterType.acceptType, 'acceptorType')
                }
                //点击其它选项，则取消“不限”的选中状态
                if(item.indexOf('')>-1){
                    item.splice(item.indexOf(''),1)
                    this.acceptorTypeArr = item
                }

                //取消了全部选项
                if(item.length == 0){
                    this.acceptorTypeArr = ['']
                    this.deleteTags('acceptorType')
                }
            }
            this.filterModel.acceptorType = this.acceptorTypeArr.join(',')
            this.getBillList()
        }
        //切换票面金额
        changePrice () {
            this.filterModel.trem_billPrice.minPrice = ''
            this.filterModel.trem_billPrice.maxPrice = ''
            this.isInputPrice = false

            //筛选出当前选中选项的值
            let { billPriceMin, billPriceMax, gtoe, ltoe} = _.find(this.billPriceOption,(e, i) => {
                return e.key == this.filterModel.billPrice;
            })
            this.filterCondition.billPrice.min = billPriceMin;
            this.filterCondition.billPrice.max = billPriceMax;
            this.filterCondition.billPrice.gtoe = gtoe;
            this.filterCondition.billPrice.ltoe = ltoe;
            //如果已经存在同类型选项的标签
            let currentTag = _.find(this.tags,(el) => el.variable === 'billPrice')
            if(currentTag) {
                currentTag.name = this.filterType.billPrice
            } else {
                this.getConditionTag(this.filterType.billPrice, 'billPrice')
            }
            //点击不限删除对应标签
            if(this.filterModel.billPrice == ''){
                this.deleteTags('billPrice')
            }
            this.getBillList()
        }
        //确定输入票面金额
        confirmPrice () {
            //取消不限
            this.filterModel.billPrice = '-1'
            //选中输入的金额
            this.isInputPrice = true
            this.filterCondition.billPrice.min = this.filterModel.trem_billPrice.minPrice;
            this.filterCondition.billPrice.max = this.filterModel.trem_billPrice.maxPrice;
            this.filterCondition.billPrice.gtoe = true;
            this.filterCondition.billPrice.ltoe = true;
            //如果已经存在同类型选项的标签
            let currentTag = _.find(this.tags,(el) => el.variable === 'billPrice')
            if(currentTag) {
                currentTag.name = this.filterType.billPrice
            } else {
                this.getConditionTag(this.filterType.billPrice, 'billPrice')
            }
            this.getBillList()
        }
        //清空票面金额
        clearPrice () {
            this.deleteTags('billPrice')
            this.filterModel.billPrice = ''
            this.isInputPrice = false
            this.filterModel.trem_billPrice.minPrice = ''
            this.filterModel.trem_billPrice.maxPrice = ''
            this.getBillList()
        }
        //切换到期天数
        changeTime () {
            this.filterModel.trem_deadTime.minTime = ''
            this.filterModel.trem_deadTime.maxTime = ''
            this.isInputTime = false

            //筛选出当前选中选项的值
            let { expiresDayMin, expiresDayMax, gtoe, ltoe} = _.find(this.deadTimeOption, (e, i) => {
                return e.key == this.filterModel.deadTime;
            })
            this.filterCondition.expiresDays.min = expiresDayMin;
            this.filterCondition.expiresDays.max = expiresDayMax;
            this.filterCondition.expiresDays.gtoe = gtoe;
            this.filterCondition.expiresDays.ltoe = ltoe;

            //如果已经存在同类型选项的标签
            let currentTag = _.find(this.tags,(el) => el.variable === 'expiresDays')
            if(currentTag) {
                currentTag.name = this.filterType.expiresDays
            } else {
                this.getConditionTag(this.filterType.expiresDays, 'expiresDays')
            }
            //点击不限删除对应标签
            if(this.filterModel.deadTime == ''){
                this.deleteTags('expiresDays')
            }
            this.getBillList()
        }
        //确定输入到期天数
        confirmDays () {
            this.filterModel.deadTime = '-1'
            this.isInputTime = true

            this.filterCondition.expiresDays.min = this.filterModel.trem_deadTime.minTime;
            this.filterCondition.expiresDays.max = this.filterModel.trem_deadTime.maxTime;
            this.filterCondition.expiresDays.gtoe = true;
            this.filterCondition.expiresDays.ltoe = true;

            //如果已经存在同类型选项的标签
            let currentTag = _.find(this.tags,(el) => el.variable === 'expiresDays')
            if(currentTag) {
                currentTag.name = this.filterType.expiresDays
            } else {
                this.getConditionTag(this.filterType.expiresDays, 'expiresDays')
            }
            this.getBillList()
        }
        //清空到期天数
        clearTime () {
            this.deleteTags('expiresDays')
            this.filterModel.deadTime = ''
            this.isInputTime = false
            this.filterModel.trem_deadTime.minTime = ''
            this.filterModel.trem_deadTime.maxTime = ''
            this.getBillList()
        }
        //切换背书瑕疵
        changeFlaw () {
            //筛选出当前选中选项的值
            let {label} = _.find(this.flawOptions,(e, i) => {
                return e.key == this.filterModel.flaw;
            })
            this.filterCondition.flaw = label
            //如果已经存在同类型选项的标签
            let currentTag = _.find(this.tags,(el) => el.variable === 'flaw')
            if(currentTag) {
                currentTag.name = this.filterType.flaw
            } else {
                this.getConditionTag(this.filterType.flaw, 'flaw')
            }
            //点击不限删除对应标签
            if(this.filterModel.flaw == ''){
                this.deleteTags('flaw')
            }
            this.getBillList()
        }
        //清空筛选条件
        clearFilter () {
            this.tags = []
            this.acceptorTypeArr = ['']
            this.isInputPrice = false
            this.isInputTime = false
            this.filterModel = {
                acceptorType: '',
                billPrice: '',
                trem_billPrice: {
                    minPrice: '',
                    maxPrice: ''
                },
                deadTime: '',
                trem_deadTime: {
                    minTime: '',
                    maxTime: ''
                },
                flaw: ''
            }
        }


        tableData:TableData = {
            header:[
                {
                    label: '发布时间',
                    key: 'bill_publishing_time',
                    formatter: (row:any) => moment(row.bill_publishing_time).format('MM-DD HH:mm')
                },
                {
                    label: '承兑人',
                    key: 'bill_acceptor_name',
                    formatter: (row:any) => ellipsis(row.bill_acceptor_name,'...',8)
                },
                {
                    label: '票面金额(万)',
                    key: 'bill_sum_price',
                    formatter: (row:any) => calc.div(row.bill_sum_price,10000)
                },
                {
                    label: '到期时间',
                    key: 'bill_deadline_time'
                },
                {
                    label: '每十万扣',
                    key: 'every_plus_interest',
                    formatter: (row:any) => row.every_plus_interest != 0 && row.every_plus_interest != null ? (row.bill_bidding_model_id == 3210 ? '一口价' : '竞价') + row.every_plus_interest : '--'
                },
                {
                    label: '电票所在户',
                    key: 'bill_bank_name',
                    formatter: (row:any) => ellipsis(row.bill_bank_name,'...',10)
                },
                {
                    label: '票号后六位数',
                    key: 'bill_bill_number',
                    formatter: (row:any) => hideStr(row.bill_bill_number)
                },
                {
                    label: '状态',
                    key: 'bill_status_name'
                }
            ],
            body: [],
            footer: {
                total: 0,
                pageSize: 10,
                currentPage: 1,
            }
        }
        form = {
            bidding_mode: 3212,
            trade_appoint_day: 0,
            bill_rate: '',
            bill_every_plus: '',
            discount_interest: '',
            every_plus_amount: '',
            discount_amount: ''
        }
        // offerForm = {}
        //是否显示勾选框
        isSelect:boolean = false
        isBatchSelect: boolean = false
        sectionArr = []
        publishModel: any = {};
        offerModel: any = {};
        rateModel: any = {};
        billId: string | number = '';
        batch: any = {
            totalNum: 0,
            totalPrice: 0
        }
        //改变状态
        changeStatus () {
            // if(this.billStatus != '1' || this.billStatus != '4'){
            //     this.isSelect = false
            // }
            this.getBillList()
        }
        billSumPriceInputMode () {
            if(!this.filterCondition.billPrice.gtoe && !this.filterCondition.billPrice.ltoe){
                return 'NO'
            }else if(this.filterCondition.billPrice.gtoe && !this.filterCondition.billPrice.ltoe){
                return 'LEFT'
            }else if(!this.filterCondition.billPrice.gtoe && this.filterCondition.billPrice.ltoe){
                return 'RIGHT'
            }else if(this.filterCondition.billPrice.gtoe && this.filterCondition.billPrice.ltoe){
                return 'ALL'
            }
        }
        deadlineTimeInputMode () {
            if(!this.filterCondition.expiresDays.gtoe && !this.filterCondition.expiresDays.ltoe){
                return 'NO'
            }else if(this.filterCondition.expiresDays.gtoe && !this.filterCondition.expiresDays.ltoe){
                return 'LEFT'
            }else if(!this.filterCondition.expiresDays.gtoe && this.filterCondition.expiresDays.ltoe){
                return 'RIGHT'
            }else if(this.filterCondition.expiresDays.gtoe && this.filterCondition.expiresDays.ltoe){
                return 'ALL'
            }
        }
        //获取我的票据列表
        async getBillList () {
            if(this.transferChannel == ''){
                this.tableData.footer.currentPage = 1
            }
            let billParamVo = {
                acceptorTypeId: this.filterModel.acceptorType,
                billSumPrice: this.filterCondition.billPrice.min + ',' + (this.filterCondition.billPrice.max == '+∞' ? '' : this.filterCondition.billPrice.max),
                deadlineTime: this.filterCondition.expiresDays.min + ',' + (this.filterCondition.expiresDays.max == '+∞' ? '' : this.filterCondition.expiresDays.max),
                billSumPriceType: this.billSumPriceInputMode(),
                deadlineTimeType: this.deadlineTimeInputMode(),
                billFlawIdsExist: this.filterModel.flaw,
                billStatus: this.billStatus || '',
                pageSize: this.tableData.footer.pageSize,
                pageNo: this.tableData.footer.currentPage
            }
            let res = await this.$http.post('bills/bill/getAllMyBills',billParamVo,{},{loading:false})
            if(res.status == 200){
                this.tableData.body = res.data.items;
                this.tableData.footer.total = res.data.totalNum;
                this.tableData.footer.pageSize = res.data.pageSize;
                this.transferChannel == ''
            }
        }

        //勾选
        selection (item) {
            this.sectionArr = item;
        }
        //显示/隐藏勾选框
        // remove () {
        //     this.isSelect = !this.isSelect
        // }
        // batchPublish () {
        //     this.isBatchSelect = !this.isBatchSelect
        // }

        // 发布
        publishBill (row) {
            this.publishModel = row;
            this.form.bidding_mode = row.bill_bidding_model_id;
            this.form.trade_appoint_day = row.bill_trade_appoint_day;
            this.form.bill_rate = row.bill_hope_rate;
            this.form.bill_every_plus = row.bill_hope_every_plus;
            this.form.discount_interest = row.hope_discount_interest;
            this.form.every_plus_amount = row.every_plus_interest;
            this.form.discount_amount = row.hope_deal_price;
            this.$refs['publishDialog'].openDialog();
        }
        //删除
        remove () {
            this.operateType = 'delete'
            this.isSelect ? this.$refs['deleteBill'].openDialog() : this.isSelect = true
        }
        // 批量发布
        batchPublish () {
            this.batch.totalPrice = 0
            this.operateType = 'publish'
            if(this.isBatchSelect){
                this.batch.totalNum = this.sectionArr.length;
                for(let i = 0; i < this.sectionArr.length; i ++){
                    this.batch.totalPrice += Number(this.sectionArr[i].bill_sum_price)
                }
                this.$refs['batchPublishBill'].openDialog();
            }else{
                this.isBatchSelect = true
            }
        }
        //取消勾选
        cancelCheck () {
            this.isSelect = false
            this.isBatchSelect = false
        }
        removeOfferBtn (row) {
            this.billId = row.bill_product_id;
            this.$refs['removeOffer'].openDialog();
        }
        editOffer (row) {
            this.publishModel = row;
            this.form.bidding_mode = row.bill_bidding_model_id;
            this.form.trade_appoint_day = row.bill_trade_appoint_day;
            this.form.bill_rate = row.bill_hope_rate;
            this.form.bill_every_plus = row.bill_hope_every_plus;
            this.form.discount_interest = row.hope_discount_interest;
            this.form.every_plus_amount = row.every_plus_interest;
            this.form.discount_amount = row.hope_deal_price;
            this.$refs['editOfferDialog'].openDialog();
        }
        // 确定发布
        async confirmPublish () {
            let publishForm = this.form;
            let res = await this.$http.post(`bills/billProduct/publishBatchs/${this.publishModel.bill_id}`,publishForm)
            if(res.status < 300){
                this.$refs['publishDialog'].closeDialog();
                this.$refs['publishDialogSuccess'].openDialog();
                this.getBillList();
            }
            // else{
            //     this.$alert(res.msg,'提示',{
            //         confirmButtonText: '确定',
            //         customClass: 'custom-message-box'
            //     }).catch(()=>{})
            // }
        }
        // 确定删除票据
        async confirmDelete () {
            let deleteBillId = this.sectionArr.map(item => item.bill_id)
            let res = await this.$http.delete(`bills/bill/${deleteBillId.join(',')}`)
            if(res.status < 300){
                this.$refs['deleteBill'].closeDialog();
                this.$refs['deleteSuccess'].openDialog();
                this.getAllTips();
                this.getBillList();
                this.isSelect = false
            }
            // else{
            //     this.$alert(res.msg,'提示',{
            //         confirmButtonText: '确定',
            //         customClass: 'custom-message-box'
            //     }).catch(()=>{})
            // }
        }
        async confirmBatchPublish () {
            let batchBillId = this.sectionArr.map(item => item.bill_id)
            let publishForm = this.form;
            let res = await this.$http.post(`bills/billProduct/publishBatchs/${batchBillId.join(',')}`,publishForm);
            if(res.status < 300){
                this.$refs['batchPublishBill'].closeDialog();
                this.$refs['batchPublishSuccess'].openDialog();
                this.getBillList();
                this.isSelect = false
            }
            // else{
            //     this.$alert(res.msg,'提示',{
            //         confirmButtonText: '确定',
            //         customClass: 'custom-message-box'
            //     }).catch(()=>{})
            // }
        }
        // 确定撤下
        async confirmremoveOffer () {
            let res = await this.$http.put(`bills/billProduct/outBillProduct/${this.billId}`)
            if(res.status < 300){
                this.$refs['removeOffer'].closeDialog();
                this.$refs['removeOfferSuccess'].openDialog();
                this.getAllTips();
                this.getBillList();
            }
            // else{
            //     this.$alert(res.msg,'提示',{
            //         confirmButtonText: '确定',
            //         customClass: 'custom-message-box'
            //     }).catch(()=>{})
            // }
        }
        // 确定修改询价
        async confirmEditOffer () {
            let offerForm = this.form;
            let res = await this.$http.put(`bills/billProduct/billProduct/${this.publishModel.bill_product_id}`,offerForm)
            if(res.status < 300){
                this.getBillList();
                this.$refs['editOfferDialog'].closeDialog();
                this.$refs['editOfferSuccess'].openDialog();
            }
            // else{
            //     this.$alert(res.msg,'提示',{
            //         confirmButtonText: '确定',
            //         customClass: 'custom-message-box'
            //     }).catch(()=>{})
            // }
        }

        closeDialog () {
            this.$refs['publishDialog'].closeDialog();
            this.$refs['publishDialogSuccess'].closeDialog();
            this.$refs['deleteBill'].closeDialog();
            this.$refs['deleteSuccess'].closeDialog();
            this.$refs['batchPublishBill'].closeDialog();
            this.$refs['batchPublishSuccess'].closeDialog();
            this.$refs['removeOffer'].closeDialog();
            this.$refs['removeOfferSuccess'].closeDialog();
            this.$refs['editOfferDialog'].closeDialog();
            this.$refs['editOfferSuccess'].closeDialog();
        }

        //分页回调
        changePage (page:number) {
            this.tableData.footer.currentPage = page;
            this.transferChannel = 'page'
            this.getBillList();
        }
        changeSize (size:number) {
            this.tableData.footer.pageSize = size;
            this.getBillList();
        }
        // 计算贴息
        async ratechange () {
            if(this.form.bill_rate < 0){
                this.$alert('请输入正确的利率！','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box',
                    callback: action => {

                    }
                })
                this.form.bill_rate = '';
                return;
            }
            if(this.form.bill_rate > 99){
                this.$alert('请输入正确的利率！','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box',
                    callback: action => {

                    }
                })
                this.form.bill_rate = '99';
                return;
            }
            this.rateModel = {}
            if(this.form.bill_rate > 0 && this.form.bill_rate < 100 || this.form.bill_every_plus != ''){
                let newDate = new Date();
                this.rateModel.start_time = moment(newDate).format('YYYY-MM-DD');
                this.rateModel.end_time = moment(this.publishModel.bill_deadline_time).format('YYYY-MM-DD');
                this.rateModel.denomination = calc.div(this.publishModel.bill_sum_price,10000);
                this.rateModel.interest_year = this.form.bill_rate;
                this.rateModel.every_plus = this.form.bill_every_plus;
                let res = await this.$http.post('tools/calculator?func=mix',this.rateModel)
                if(res.status == 200){
                    this.form.discount_interest = res.data.discount_interest;
                    this.form.every_plus_amount = res.data.every_plus_amount;
                    this.form.discount_amount = res.data.discount_amount;
                    // this.batchBillList[index].bill_interest = res.data.discount_interest;
                    // this.batchBillList[index].bill_amount = res.data.discount_amount;
                    // this.batchBillList[index].every_plus = res.data.every_plus_amount
                }
            }
        }
        getBillTips (item) {
            switch (item.key) {
                case '3':
                    return this.allTips.billSureCountNum;
                case '4':
                    return this.allTips.billCheckLoserCountNum;
            }
        }
        timer:any = null
        mounted () {
            this.getAllTips();
            this.getBillList();
            this.timer = setInterval(()=>{
                this.getAllTips();
                this.getBillList();
            },60000)
        }
        destroyed() {
            clearInterval(this.timer)
        }
    }
</script>

<style lang="scss" scoped>
    .el-container{
        min-width: 1360px;
    }
    .bill-btn {
        // height: $height-int-register;
        height: 32px;
        padding: 0 10px;
        font-size: 14px;
        border-radius: 4px;
    }
    .enter-bill {
        @extend .bill-btn;
    }
    .bill-batch-btn {
        @extend .bill-btn;
    }
    .bill-choose-btn {
        @extend .bill-btn;
        color: $__color-primary !important;
        background: $__color-bg-unimportance !important;
        border-color: $__color-primary !important;
        &:hover{
            opacity: 0.8%;
        }
    }
    .bill-delete-btn{
        @extend .bill-btn;
    }
    .bill-list-left{
        width: 697px;
        .bill-status-type{
            width: 482px;
            .el-radio-button{
                font-size: 14px;
            }
        }
    }
    .hpx-label-btn{
        margin-left: 40px;
    }
    .bill-list-right {
        text-align: right;
        float: right;
        width: 286px;
        .cancel-btn{
            padding-top: 8px;
            padding-bottom: 8px;
        }
    }
    .choose-box {
        .el-button {
            @extend .bill-btn;
        }
        padding-top: 20px;
        box-shadow: 2px 2px 10px 0px rgba(28,31,51,0.15);
        margin-top: 12px;
        margin-bottom: 10px;
        .el-form-item {
            margin-bottom: 14px;
        }
    }
    .choose-box1 {
        padding-left: 60px;
    }
    .publish-box-con {
        border-bottom: 1px solid $__color-line;
    }
    .box-con-padding {
        padding-top: 18px;
        padding-bottom: 18px;
    }
    .rem-text {
        color: $__color-remind;
        font-size: $__big-font-size;
    }
    .approve-int-width {
        width: 320px;
    }
    .bill-warm-con {
        line-height: 20px;
    }
    .remove_btn {
        color: $__color-remind !important;
    }
    .rem_box_left {
        width: 73px;
        float: left;
        text-align: left;
        color: $__color-label;
        font-size: $__font-size-default;
    }
    .rem_box_right {
        width: 445px;
        float: left;
        font-size: $__little-font-size;
        text-align: left;
        line-height: 20px;
        word-wrap:break-word;
        height: 66px;
        color: $__color-label;
    }
    .icon-tixing {
        color: $__color-remind;
    }
    .rem_box {
        height: 50px;
    }
    .offer_info_box {
        margin-left: 130px;
        line-height: 28px;
    }
    .rate_offer {
        margin-top: 6px;
        margin-bottom: 12px;
    }
    .bid_tips {
        position: absolute;
        top: 0;
        right: 0;
    }
</style>
<style lang="scss">
    .choose-box1 {
        .el-form-item__label{
            line-height: 32px;
        }
        .el-checkbox-button--small .el-checkbox-button__inner{
            padding-top: 8px !important;
            padding-bottom: 8px !important;
            font-size: 14px !important;
        }
    }
    .nowrap{
        white-space:nowrap;
        .bill_price{
            margin-top: -4px !important;
            .el-radio-button:last-child .el-radio-button__inner{
                border-radius: 0 !important;
            }
        }
        .ready_bill_price{
            display: inline-block;
            height: 30px;
            padding: 0 15px !important;
            border: 1px solid #dcdfe6;
            color: #606266;
            border-radius: 0px 4px 4px 0 !important;
            border-left: none;
            margin-left: -4px !important;
            .el-input{
                width: 35px;
                .el-input__inner{
                    padding: 0 2px !important;
                    height: 22px;
                    border: none;
                    line-height: 32px;
                }
            }
            input::-webkit-outer-spin-button,
            input::-webkit-inner-spin-button{
                -webkit-appearance: none !important;
            }
            input[type="number"]{
                -moz-appearance:textfield;
            }
        }
    }
    .is_active{
        color: #fff !important;
        background-color: $__color-primary;
        box-shadow: -1px 0 0 0 $__color-primary;
        border-color: $__color-primary !important;
        .el-input{
            .el-input__inner{
                background-color: $__color-primary;
                color: #fff;
            }
        }
    }
    .my_bill_form {
        .filter_bottom {
            .el-form-item__content {
                line-height: 40px;
            }
            border-top: 1px solid $__color-line;
            .el-form-item {
                padding-left: 60px;
                .el-tag{
                    margin-right: 10px;
                }
            }
        }
        .el-form-item__content {
            line-height: 32px;
        }
    }
    .publish-box {
        .el-form-item {
            margin-bottom: 8px !important;
        }
    }
    .my_bill_table {
        tbody {
            tr {
                td:nth-last-child(1){
                    .cell {
                        // width: 176px;
                        text-align: right;
                        // margin-left: -33px;
                        // white-space: nowrap;
                        padding: 0 6px 0 0;
                        word-wrap: break-word;
                    }
                    .el-button + .el-button {
                        margin-left: 0;
                    }
                }
            }
        }
    }
    .bill-list-left{
        .bill-status-type{
            .el-radio-button{
                .el-radio-button__inner{
                    font-size: 14px !important;
                    padding: 8px 15px;
                }
            }
        }
    }
</style>
<style lang="scss">
    @media screen and (max-width: 1300px){
        .bill-list-left{
            width: 650px !important;
            .bill-status-type{
                width: 446px !important;
                .el-radio-button__inner{
                    padding: 8px 12px !important;
                }
            }
            .hpx-label-btn{
                margin-left: 30px;
            }
        }
    }
</style>
